<template>
	<view>
		
		<charging @update="update" v-if="chargingShow" :show.sync="chargingShow" :item="item" :type="1"/>
		
		<view class="my-content">
			<view class="tab-box">
				<text :class="currentInx==0?'active tab-item':'tab-item'" @click="changeInx(0)">使用中</text>
				<view class="tab-line"></view>
				<text :class="currentInx==1?'active tab-item':'tab-item'" @click="changeInx(1)">使用完</text>
			</view>
			<view class="res-box" v-if="currentInx==0" v-for="(item,index) in orderData">
				<view class="jiao">{{item.device.speed}}</view>
				<view class="res-shang">
					<view class="shang-flex">
						<view class="shang-img">
							<image :src="item.station.pic" mode="widthFix"></image>
						</view>
						<text>{{item.station.name}}</text>
					</view>
					<text class="shang-text">{{item.station.address}}</text>
				</view>
				<view class="res-top">
					<text class="res-top-l">电桩{{statusText[item.device.status]}}</text>
					<view class="res-top-c">
						<view class="res-img">
							<image :src="item.device.pic" mode="widthFix"></image>
						</view>
						<view class="res-text">
							<text class="res-title">{{item.device.name}}({{item.device.brand}})</text>
							<view class="res-flex">
								<text>编号:{{item.device.sn}}</text>
								<text>功率:{{item.device.rate}}kw</text>
							</view>
						
							<text decode="decode">营业时间:{{ item.device.start_time }}-{{ item.device.end_time }} <block v-if="item.device.start_time2"> |{{ item.device.start_time2 }}-{{ item.device.end_time2 }} </block><block v-if="item.device.start_time3">|{{ item.device.start_time3 }}-{{ item.device.end_time3 }} </block></text>

						</view>
					</view>
				</view>
				<view class="res-c">
					<text>充电开始时间：{{item.start_time}}</text>
					<text style="display: none;">充电车辆：{{item.car.name}}</text>
					<text style="display: none;">停车费：{{item.park_price_wait}}元</text>
					<text class="gray" style="display: none;">停车费计费标准:{{item.park.price}}元/时(充电中+15分钟免费）</text>
				</view>
				
				<view style="display: flex;">
					<view class="res-b" style="color: #FFC300;width: 30%;" @click="complete_device(item)">使用完毕</view>
					
					<view class="res-b" style="width: 70%;" @click="chargingShow_action(item)">
						<image src="../../static/my/icon7.png" mode="widthFix"></image>
						<text>实时充电数据</text>
					</view>
					
				</view>
				
				
				
			</view>
			<view class="res-box" v-if="currentInx==1" v-for="(item,index) in orderData">
				<view class="jiao">{{item.device.speed}}</view>
				<view class="res-shang">
					<view class="shang-flex">
						<view class="shang-img">
							<image :src="item.station.pic" mode="widthFix"></image>
						</view>
						<text>{{item.station.name}}</text>
					</view>
					<text class="shang-text">{{item.station.address}}</text>
				</view>
				<view class="res-top">
					<text class="res-top-l red">已充完</text>
					<view class="res-top-c">
						<view class="res-img">
							<image :src="item.device.pic" mode="widthFix"></image>
						</view>
						<view class="res-text">
							<text class="res-title">{{item.device.name}}({{item.device.brand}})</text>
							<view class="res-flex">
								<text>编号:{{item.device.sn}}</text>
								<text>功率:{{item.device.rate}}kw</text>
							</view>
							<text decode="decode">营业时间:{{ item.device.start_time }}-{{ item.device.end_time }} <block v-if="item.device.start_time2"> |{{ item.device.start_time2 }}-{{ item.device.end_time2 }} </block><block v-if="item.device.start_time3">|{{ item.device.start_time3 }}-{{ item.device.end_time3 }} </block></text>
						</view>
					</view>
				</view>
				<view class="res-c">
					<text>充电开始时间：{{item.start_time}}</text>
					<text>充电结束时间：{{item.end_time}}</text>
					<view class="res-flex">
						<text>充电时长：{{item.charging_duration}}分</text>
						<view class="res-flex">平均时段：<text style="color: #FF0000;">{{item.du}}</text>元/度</view>
					</view>
					<view class="res-flex">
						<text style="display: none;">充电车辆：{{item.car.name}}</text>
						<text>充电量：{{item.charging_capacity}}度</text>
					</view>
					<view class="res-flex" style="display: none;">
						<text>电费：{{item.electric_price}}元</text>
						<text>服务费：{{item.service_price}}元</text>
					</view>
					<view class="res-flex" style="display: none;">
						<text>停车费：{{item.park_price}}元</text>
						<text style="display: none;">剩余免费停车时长：120分钟</text>
					</view>
					<text class="gray"  style="display: none;">停车费计费标准:6元/时(充电中+15分钟免费）</text>
				</view>
			</view>
		
		</view>
	</view>
</template>

<script>
	import charging from "@/components/common/charging.vue"
	
	export default {
		components: {
			charging
		},
		data() {
			return {
				item:{},
				chargingShow: false,
				currentInx:0,
				statusText: {
					1: "正常",
					2: "故障",
					3: "被占用 ",
					4: "停用",
				},
				orderData:[],
				page:1,
				formData: {
					shuxing:'self',
					// 车辆id
					car_id: '',
					// 电桩id(预约停车可不传)
					device_id: '',
					// 请求用户id
					member_id: uni.getStorageSync("id"),
					// 预约类型(1:预约充电 2:预约停车)
					type: '1'
				},
			}
		},
		onLoad:function(option) {
			if(option.do==1){
				this.currentInx=1
			}
			this.getOrder()
			
		},
		onShow(){
			this.getOrder()
		},
		methods: {
			chargingShow_action(item){
				this.item = item
				this.chargingShow=true
			},
			complete_device(item){
				var that = this
				
				uni.showModal({
				    title: '提示',
				    content: '确定结束充电吗？',
				    success: function (res) {
				        if (res.confirm) {
							that.formData.device_id = item.device_id
							that.complete_do()
						}
					}
				});
			},
			
			async complete_do(){
				var that = this
				const res = await that.http("post", '/api/order/complete_order', that.formData)
				if(res.code==200){
					uni.showToast({
						title:'操作成功'
					})
					setTimeout(function(){
						uni.redirectTo({
							url:'/pages/my/recordList?do=1'
						})
					},2000)
				}else{
					uni.showModal({
						'content':'此电桩已被其他人占用'
					})
				}
			},
			
			
			update(e){
				var that = this
				setTimeout(function(){
					that.getOrder()
				},1000)
			},
			changeInx(e){
				this.currentInx=e
				this.getOrder()
			},
			async getOrder() {
				if(this.currentInx==0){
					var menu_type = 2
				}else{
					var menu_type = 4
				}
				this.orderData = [];
				const res = await this.http("post", "/api/order/my_order", {
					member_id: uni.getStorageSync("id"),
					page: this.page,
					shuxing:'self',
					menu_type: menu_type
				})
				this.orderData = res.data
			},
		}
	}
</script>

<style lang="less" scoped>
	.my-content{
		width: 100%;
		padding: 30upx;
		box-sizing: border-box;
		.tab-box{
			width: 100%;
			height: 80upx;
			border-radius: 16upx;
			background: #FFFFFF;
			display: flex;
			align-items: center;
			justify-content: space-around;
			padding: 20upx;
			box-sizing: border-box;
			margin-bottom: 20upx;
			box-shadow: 0px 4px 10px 0px rgba(0, 0, 0, 0.3);
			.tab-line{
				width: 2px;
				height: 100%;
				background-color: #D8D8D8;
			}
			.tab-item{
				font-size: 32upx;
				color: #D8D8D8;
				font-weight: bold;
				display: block;
				width: 40%;
				text-align: center;
			}
			.active{
				color: #FF8F1F;
			}
		}
		.res-box{
			width: 100%;
			border-radius: 16upx;
			overflow: hidden;
			box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
			margin-bottom: 20upx;
			position: relative;
			.jiao{
				position: absolute;
				top: 10upx;
				right: 10upx;
				width: 40upx;
				height: 40upx;
				border-radius: 8upx;
				background: #FA5151;
				color: #fff;
				font-size: 24upx;
				text-align: center;
				line-height: 40upx;
			}
			.res-top{
				width: 100%;
				display: flex;
				.res-top-l{
					width: 40upx;
					background-color: #3662EC;
					font-size: 24upx;
					color: #fff;
					display: flex;
					align-items: center;
					justify-content: center;
					text-align: center;
					padding: 10upx 0;
				}
				.red{
					background-color: #FA5151 !important;
				}
				.res-top-c{
					display: flex;
					align-items: center;
					width: 90%;
					padding: 10upx;
					box-sizing: border-box;
					.res-img{
						width: 100upx;
						height: 100upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10upx;
						image{
							width: 100%;
							height: auto;
						}
					}
					.res-text{
						.res-flex{
							display: flex;
							text{
								min-width: 200upx;
								margin-right: 20upx;
							}
						}
						.res-title{
							font-size: 28upx;
							color: #000;
						}
						text{
							display: block;
							font-size: 24upx;
							color: #9E9E9E;
							margin-bottom: 10upx;
						}
					}
				}
			}
			.res-shang{
				width: 100%;
				padding: 20upx;
				box-sizing: border-box;
				.shang-flex{
					width: 100%;
					display: flex;
					align-items: center;
					.shang-img{
						width: 60upx;
						height: 60upx;
						border-radius: 50%;
						overflow: hidden;
						margin-right: 10upx;
						image{
							width: 100%;
							height: auto;
							display: block;
						}
					}
					text{
						font-size: 44upx;
						color: #000;
					}
				}
				.shang-text{
					font-size: 28upx;
					color: #A6A6A6;
					display: block;
					margin-top: 10upx;
					overflow: hidden;
					white-space: nowrap;
					text-overflow: ellipsis;
				}
			}
			.res-c{
				width: 100%;
				padding: 10upx 20upx;
				box-sizing: border-box;
				border-top: 1px solid #D8D8D8;
				border-bottom: 1px solid #D8D8D8;
				text{
					display: block;
					font-size: 28upx;
					color: #000;
					margin-bottom: 5upx;
				}
				.res-flex{
					display: flex;
					justify-content: space-between;
				}
				.gray{
					color: #A6A6A6;
				}
			}
			.res-b{
				font-size: 36upx;
				color: #3662EC;
				font-weight: 600;
				padding: 20upx 0;
				justify-content: center;
				display: flex;
				align-items: center;
				image{
					width: 40upx;
					height: auto;
					display: block;
					margin-right: 10upx;
				}
			}
		}
	}
</style>